<template>
  <view class="moneyPageIndex">
    <view class="header" v-if="userInfo.c_role == 'MY0002'">
      <view class="userInfo">
        <view class='avater'></view>
        <view class="info">
          <view class="area">{{userInfo.c_contacts_area}}</view>
          <view class="phone">{{userInfo.c_contacts_phone}}</view>
        </view>
      </view>
      <view class="setting">
        <nut-button shape="square" plain color="#666666" is-link @click="gotoPage('/pages/setting/index')">
          <template #icon>
            <IconFont font-class-name="iconfont" class-prefix="icon" size="15" name="shezhi" />
          </template>
        </nut-button>
      </view>
    </view>
    <nut-space></nut-space>
    <nut-cell title="查询日期" :desc="showDesc" @click="showTimeRange = true" />
      <nut-calendar
        v-model:visible="showTimeRange"
        :default-value="selectData"
        type="range"
        start-date="2024-11-27"
        :end-date="endDate"
        @close="showTimeRange = false"
        @choose="chooseAction"        
      ></nut-calendar>
      <nut-space></nut-space>
      <nut-grid :column-num="2">
        <nut-grid-item :text=" '眼镜使用总数:' + (totalData.astotal_glass_num || 0)">
          <IconFont name="order"></IconFont>
        </nut-grid-item>
        <nut-grid-item :text="'场地总数:' +  (totalData.f_num || 0)">
          <IconFont name="location2"></IconFont>
        </nut-grid-item>
      </nut-grid>
      <nut-table :columns="columns" :data="tableData" striped></nut-table>

  </view>
</template>

<script setup>
import './index.scss';
import { ref, computed } from 'vue';
import { IconFont } from '@nutui/icons-vue-taro'
import Taro, {useDidShow} from '@tarojs/taro'
import { query_all_details_data, query_summary_data } from '../../https/api';

const userInfo = ref({})

const gotoPage = (path) => {
  Taro.navigateTo({
    url: path
  })
}
// 日期选择
const selectData = ref([])
const showTimeRange = ref(false)
const showDesc = ref('')

const getNumTwoBit = function (n) {
  n = Number(n)
  return (n > 9 ? '' : '0') + n
}
const date2Str = function (date, split) {
  split = split || '-'
  const y = date.getFullYear()
  const m = getNumTwoBit(date.getMonth() + 1)
  const d = getNumTwoBit(date.getDate())
  return [y, m, d].join(split)
}
const getDay = function (i) {
  i = i || 0
  let date = new Date()
  const diff = i * (1000 * 60 * 60 * 24)
  date = new Date(date.getTime() + diff)
  return date2Str(date)
}

const endDate = ref(getDay(0))

selectData.value = [getDay(0), getDay(0)]

showDesc.value = `${selectData.value[0]}到${selectData.value[1]}`

const chooseAction = (param) => {
  selectData.value = [param[0][3], param[1][3]]
  showDesc.value = `${selectData.value[0]}到${selectData.value[1]}`
  queryData(selectData.value)

}
const totalData = ref({
  astotal_glass_num: '',
  f_num: ''
})
const tableData = ref([])
const columns = ref([
  {
    title: '场地名称',
    key: 'f_field_name',
    align: 'center'
  },
  {
    title: '眼镜使用数量',
    key: 'total_glass_num',
    align: 'center'
  }
])
const queryData = (params) => {
  query_all_details_data({data_time: params}).then(res => {
    if (res.code == '1000') {
      tableData.value = res.data
    } else {
      Taro.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  })
  query_summary_data({data_time: params}).then(res => {
    if (res.code == '1000') {
      totalData.value = res.data[0]
    }
    
  })
}

useDidShow(() => {
  Taro.hideHomeButton()
  var userInfoSync = Taro.getStorageSync('userInfo')
  if(!userInfoSync) {
    Taro.reLaunch({
      url: '/pages/login/index'
    })
    return
  }
  userInfo.value = userInfoSync ? JSON.parse(userInfoSync) : {}
  queryData(selectData.value)
})
</script>

<style>
</style>
